<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 黄淮学院校园活动管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all;
            }
            .btn-secondary {
                @apply bg-white border border-primary text-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all;
            }
            .nav-item {
                @apply px-4 py-2 rounded-lg transition-all hover:bg-primary/10 cursor-pointer;
            }
            .nav-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .form-input {
                @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all;
            }
            .form-label {
                @apply block text-sm font-medium text-gray-700 mb-1;
            }
            .contact-card {
                @apply bg-white rounded-xl shadow-sm p-6 card-hover;
            }
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 text-dark">
    <!-- 顶部导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-graduation-cap text-white text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-primary">黄淮学院</h1>
                        <p class="text-xs text-info">校园活动管理系统</p>
                    </div>
                </div>
                
                <!-- 导航链接 - 桌面端 -->
                <nav class="hidden md:flex items-center space-x-2">
                    <a href="index.html" class="nav-item">首页</a>
                    <a href="activities.html" class="nav-item">活动列表</a>
                    <a href="discover.html" class="nav-item">发现</a>
                    <a href="about.html" class="nav-item">关于我们</a>
                </nav>
                
                <!-- 用户操作 -->
                <div class="flex items-center space-x-4">
                    <button id="searchBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all">
                        <i class="fa fa-search text-info"></i>
                    </button>
                    <button id="notificationsBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all relative">
                        <i class="fa fa-bell text-info"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <div id="userMenu" class="relative">
                        <button id="userMenuBtn" class="flex items-center space-x-2 hover:bg-gray-100 p-1 rounded-lg transition-all">
                            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                            <span class="hidden md:inline-block font-medium">游客</span>
                            <i class="fa fa-caret-down text-xs text-info"></i>
                        </button>
                        <!-- 用户下拉菜单 -->
                        <div id="userDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden">
                            <a href="login.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-sign-in mr-2 text-info"></i>登录
                            </a>
                            <a href="register.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-user-plus mr-2 text-info"></i>注册
                            </a>
                        </div>
                    </div>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-all">
                        <i class="fa fa-bars text-info"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 搜索框 -->
        <div id="searchBox" class="container mx-auto px-4 pb-4 hidden">
            <div class="relative">
                <input type="text" placeholder="搜索活动、主办方..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-info"></i>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden container mx-auto px-4 pb-4 hidden">
            <nav class="flex flex-col space-y-1">
                <a href="index.html" class="nav-item">首页</a>
                <a href="activities.html" class="nav-item">活动列表</a>
                <a href="discover.html" class="nav-item">发现</a>
                <a href="about.html" class="nav-item">关于我们</a>
                <div class="pt-2 flex space-x-2">
                    <a href="login.html" class="btn-primary flex-1 text-center">登录</a>
                    <a href="register.html" class="btn-secondary flex-1 text-center">注册</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="mb-10">
            <h1 class="text-3xl font-bold mb-2">联系我们</h1>
            <p class="text-info">如有任何问题或建议，请通过以下方式联系我们</p>
        </section>

        <!-- 联系信息和表单 -->
        <section class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
            <!-- 左侧联系信息 -->
            <div class="lg:col-span-1 space-y-6">
                <!-- 联系卡片 -->
                <div class="contact-card">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                            <i class="fa fa-envelope text-primary"></i>
                        </div>
                        <div>
                            <h3 class="font-bold">电子邮箱</h3>
                            <p class="text-gray-600 text-sm">system@huanghuai.edu.cn</p>
                        </div>
                    </div>
                    <p class="text-sm text-gray-500">请发送您的问题或建议到我们的邮箱，我们会尽快回复。</p>
                </div>
                
                <div class="contact-card">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
                            <i class="fa fa-phone text-secondary"></i>
                        </div>
                        <div>
                            <h3 class="font-bold">联系电话</h3>
                            <p class="text-gray-600 text-sm">0396-2853611</p>
                        </div>
                    </div>
                    <p class="text-sm text-gray-500">工作时间：周一至周五 8:00-17:30</p>
                </div>
                
                <div class="contact-card">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center">
                            <i class="fa fa-map-marker text-warning"></i>
                        </div>
                        <div>
                            <h3 class="font-bold">办公地址</h3>
                            <p class="text-gray-600 text-sm">办公楼4楼信息技术中心</p>
                        </div>
                    </div>
                    <p class="text-sm text-gray-500">河南省驻马店市开源大道6号黄淮学院</p>
                </div>
                
                <div class="contact-card">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center">
                            <i class="fa fa-clock-o text-success"></i>
                        </div>
                        <div>
                            <h3 class="font-bold">服务时间</h3>
                            <p class="text-gray-600 text-sm">工作日 8:00-17:30</p>
                        </div>
                    </div>
                    <p class="text-sm text-gray-500">周末及节假日休息，如有紧急问题请发送邮件</p>
                </div>
            </div>
            
            <!-- 右侧联系表单 -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-sm p-6 md:p-8">
                    <h2 class="text-xl font-bold mb-6">发送消息</h2>
                    <form id="contactForm">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
                                <input type="text" id="name" class="form-input" placeholder="请输入您的姓名">
                            </div>
                            <div>
                                <label for="email" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
                                <input type="email" id="email" class="form-input" placeholder="请输入您的电子邮箱">
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
                            <select id="subject" class="form-input">
                                <option value="">请选择消息主题</option>
                                <option value="bug">问题反馈</option>
                                <option value="suggestion">功能建议</option>
                                <option value="support">寻求帮助</option>
                                <option value="cooperation">合作咨询</option>
                                <option value="other">其他问题</option>
                            </select>
                        </div>
                        
                        <div class="mb-6">
                            <label for="message" class="form-label">消息内容 <span class="text-danger">*</span></label>
                            <textarea id="message" rows="6" class="form-input" placeholder="请详细描述您的问题或建议..."></textarea>
                        </div>
                        
                        <div class="flex items-center mb-6">
                            <input type="checkbox" id="agreement" class="w-4 h-4 text-primary focus:ring-primary/50">
                            <label for="agreement" class="ml-2 text-sm text-gray-600">
                                我同意系统收集和处理我的联系信息用于回复我的问题
                            </label>
                        </div>
                        
                        <div id="formResponse" class="mb-6 hidden p-4 rounded-lg text-center"></div>
                        
                        <button type="submit" class="btn-primary w-full">发送消息</button>
                    </form>
                </div>
            </div>
        </section>

        <!-- 常见问题快速链接 -->
        <section class="mb-16">
            <div class="bg-primary/5 rounded-xl p-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h2 class="text-xl font-bold mb-2">有常见问题？</h2>
                        <p class="text-gray-600">在联系我们之前，建议您先查看我们的常见问题解答</p>
                    </div>
                    <a href="faq.html" class="btn-primary inline-flex items-center gap-2">
                        <i class="fa fa-question-circle"></i> 查看常见问题
                    </a>
                </div>
            </div>
        </section>

        <!-- 联系负责人 -->
        <section>
            <div class="text-center mb-10">
                <h2 class="text-2xl font-bold mb-3">联系负责人</h2>
                <p class="text-info max-w-2xl mx-auto">以下是系统各模块的负责人，您可以直接联系相关负责人解决问题</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 负责人1 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6 text-center">
                        <img src="https://picsum.photos/id/1001/200/200" alt="张明" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-primary/20">
                        <h3 class="font-bold text-lg mb-1">张明</h3>
                        <p class="text-primary mb-2">系统管理员</p>
                        <p class="text-gray-600 text-sm mb-4">负责系统整体运行和用户权限管理</p>
                        <div class="flex justify-center space-x-4">
                            <a href="mailto:zhangming@huanghuai.edu.cn" class="text-gray-500 hover:text-primary transition-all">
                                <i class="fa fa-envelope-o"></i>
                            </a>
                            <a href="tel:13800138001" class="text-gray-500 hover:text-primary transition-all">
                                <i class="fa fa-phone"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 负责人2 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6 text-center">
                        <img src="https://picsum.photos/id/1002/200/200" alt="李华" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-secondary/20">
                        <h3 class="font-bold text-lg mb-1">李华</h3>
                        <p class="text-secondary mb-2">活动审核员</p>
                        <p class="text-gray-600 text-sm mb-4">负责活动内容审核和发布管理</p>
                        <div class="flex justify-center space-x-4">
                            <a href="mailto:lihua@huanghuai.edu.cn" class="text-gray-500 hover:text-secondary transition-all">
                                <i class="fa fa-envelope-o"></i>
                            </a>
                            <a href="tel:13800138002" class="text-gray-500 hover:text-secondary transition-all">
                                <i class="fa fa-phone"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 负责人3 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6 text-center">
                        <img src="https://picsum.photos/id/1003/200/200" alt="王芳" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-warning/20">
                        <h3 class="font-bold text-lg mb-1">王芳</h3>
                        <p class="text-warning mb-2">技术支持</p>
                        <p class="text-gray-600 text-sm mb-4">负责技术问题解答和系统故障处理</p>
                        <div class="flex justify-center space-x-4">
                            <a href="mailto:wangfang@huanghuai.edu.cn" class="text-gray-500 hover:text-warning transition-all">
                                <i class="fa fa-envelope-o"></i>
                            </a>
                            <a href="tel:13800138003" class="text-gray-500 hover:text-warning transition-all">
                                <i class="fa fa-phone"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
                            <i class="fa fa-graduation-cap text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">黄淮学院</h3>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">校园活动管理系统致力于为全校师生提供便捷的活动信息服务平台。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="index.html" class="hover:text-white transition-all">首页</a></li>
                        <li><a href="activities.html" class="hover:text-white transition-all">活动列表</a></li>
                        <li><a href="discover.html" class="hover:text-white transition-all">发现</a></li>
                        <li><a href="about.html" class="hover:text-white transition-all">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="faq.html" class="hover:text-white transition-all">常见问题</a></li>
                        <li><a href="contact.html" class="hover:text-white transition-all">联系我们</a></li>
                        <li><a href="privacy.html" class="hover:text-white transition-all">隐私政策</a></li>
                        <li><a href="terms.html" class="hover:text-white transition-all">用户协议</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3"></i>
                            <span>河南省驻马店市开源大道6号黄淮学院</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3"></i>
                            <span>0396-2853611</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3"></i>
                            <span>contact@huanghuai.edu.cn</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pt-8 border-t border-white/10 text-center text-gray-500 text-sm">
                <p>© 2023 黄淮学院校园活动管理系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
        <i class="fa fa-angle-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 联系表单提交处理
            const contactForm = document.getElementById('contactForm');
            const formResponse = document.getElementById('formResponse');
            
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 表单验证
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const subject = document.getElementById('subject').value;
                const message = document.getElementById('message').value;
                const agreement = document.getElementById('agreement').checked;
                
                // 验证是否填写必填项
                if (!name || !email || !subject || !message) {
                    showFormResponse('请填写所有必填项', 'error');
                    return;
                }
                
                // 验证邮箱格式
                const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
                if (!emailPattern.test(email)) {
                    showFormResponse('请输入有效的电子邮箱地址', 'error');
                    return;
                }
                
                // 验证是否同意协议
                if (!agreement) {
                    showFormResponse('请同意我们的信息收集和处理政策', 'error');
                    return;
                }
                
                // 模拟表单提交
                showFormResponse('消息发送成功，我们将尽快回复您！', 'success');
                
                // 重置表单
                contactForm.reset();
                
                // 5秒后隐藏响应消息
                setTimeout(() => {
                    formResponse.classList.add('hidden');
                }, 5000);
            });
            
            // 显示表单响应消息
            function showFormResponse(message, type) {
                formResponse.textContent = message;
                formResponse.classList.remove('hidden');
                
                // 设置不同类型的样式
                if (type === 'success') {
                    formResponse.classList.remove('bg-danger/10', 'text-danger');
                    formResponse.classList.add('bg-success/10', 'text-success');
                } else if (type === 'error') {
                    formResponse.classList.remove('bg-success/10', 'text-success');
                    formResponse.classList.add('bg-danger/10', 'text-danger');
                }
            }
        });
    </script>
</body>
</html>